<template>
  <div id="container"></div>
  <div class="city-list">
    <!-- <a v-for="i in data" @click.stop="animateToProvice(i)">{{ i.name }}</a> -->
    <a @click="animateToProvice()">全部</a>
    <a @click="getPosition">获取位置</a>
  </div>
</template>

<script setup lang="ts">
import axios from 'axios';
import * as THREE from 'three';
import { onMounted, ref } from 'vue';
import create3dchina from './3Dchina';
import CreateThree from '../../../../three/base';
import CamerAnimet from '../../../../three/CamerAnimet';
import cameraconfig from './config.json';
import { update } from './3DBar';
const scene = new CreateThree({
  stats: true,
  css2d: true,
  background: new THREE.Color('#e7eef7'),
  fog: new THREE.Fog('#e7eef7', 400, 1000),
  camera: {
    position: { y: 1000 }
  },
  control: {
    minDistance: 10,
    maxDistance: 1000,
    enableDamping: true,
    maxPolarAngle: Math.PI / 2.5
  },
  renderer: {
    antialias: true
  }
});
const china = new create3dchina(
  {
    url: 'data/china.json',
    map: 'images/china.jpg',
    data: 'data/china_city_gdp.json',
    normal: {
      scale: new THREE.Vector2(1, 1),
      map: 'images/districtTexture.jpg'
    }
  },
  scene.camera
);
const camerAnimet = new CamerAnimet(scene.camera, scene.control);
const animateToProvice = (data?: any) => {
  const defaultData = {
    camera: [22.56, 301.65, 54.13],
    target: [9.56, -13.35, -18.87]
  };
  camerAnimet.move(data || defaultData);
};
const getPosition = () => {
  console.log(scene.camera.position, scene.control.target);
};
onMounted(async () => {
  china.setCallBack(e => {
    if (!e.name) return;
    console.log(e.name);
    const item = cameraconfig.find((i: any) => e.name.indexOf(i.name) > -1);
    if (item && item.camera) {
      camerAnimet.move(item);
    }
  });
  await china.load();
  const group = new THREE.Group();
  const bg = createWorldBg(china.box);
  scene.bind('#container');
  group.add(china.mesh);
  china.move(-579.5, -186);
  group.add(bg);
  group.rotateX(-Math.PI * 0.5);
  scene.add(group);
  scene.add(new THREE.AmbientLight(0xffffff, 3));
  animateToProvice();
  animate();
});
function animate(time?: number) {
  update();
  scene.update();
  camerAnimet.update(time);
  requestAnimationFrame(animate);
}
const textureLoader = new THREE.TextureLoader();
const createWorldBg = (box: THREE.Box3) => {
  const map = textureLoader.load('images/world-plan-2.jpg');
  map.colorSpace = THREE.SRGBColorSpace;
  const width = 3 * (box.max.x - box.min.x);
  const mesh = new THREE.Mesh(
    new THREE.PlaneGeometry(width, width),
    new THREE.MeshPhysicalMaterial({ map, side: THREE.DoubleSide })
  );
  mesh.name = '背景';
  return mesh;
};
</script>

<style lang="less" scoped>
.city-list {
  position: fixed;
  right: 10px;
  bottom: 10px;
  color: #fff;
  text-align: center;

  a {
    margin: 5px;
    line-height: 1;
    display: block;
    cursor: pointer;
    background: #000;
    padding: 10px 20px;
  }
}
</style>
